<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>

    <div class="mainCon">
      <!-- 身份信息 -->
      <div style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">人员身份</div>
        <el-row class="itemInfo">
          <el-col :span="20">
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员姓名：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                employeeName || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >身份证号：</span
              >
              <span
                class="gridContent contentSty color666 fontSizeF"
                :title="idCard"
                >{{ idCard || '--' }}</span
              >
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员性别：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                employeeSex || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >出生日期：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                employeeBirth || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >人员民族：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                employeeNation || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >文化程度：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                edu || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >婚姻状况：</span
              >
              <span class="gridContent color666 fontSizeF">{{
                maritalStatus || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >政治面貌：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">{{
                politicalStatus || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >家庭住址：</span
              >
              <span
                class="gridContent color666 fontSizeF"
                :title="homeAddress"
                >{{ homeAddress || '--' }}</span
              >
            </el-col>
          </el-col>
          <el-col :span="4" style="text-align: center" class="readIdCardBox">
            <img
              :src="idcardUrl ? idcardUrl : errorPath"
              style="width: 100px"
            />
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <!-- 不良，奖励信息 -->
      <div
        style="padding: 20px 24px 30px"
        v-if="rewardsInfo.BAD || rewardsInfo.GOOD"
      >
        <div class="secondaryTitle secondaryTitleTheme">奖励记录</div>
        <el-row>
          <el-col :span="20">
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >不良记录：</span
              >
              <span class="gridContent contentSty color666 fontSizeF">
                <el-link
                  type="primary"
                  @click="toRewardsList('BAD')"
                  v-if="rewardsInfo.BAD > 0"
                  >查看</el-link
                >
                <span v-else>--</span>
              </span>
            </el-col>
            <el-col :span="12" class="labelWidthSty detailInfoItemSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >奖励信息：</span
              >
              <span class="gridContent color666 fontSizeF">
                <el-link
                  type="primary"
                  @click="toRewardsList('GOOD')"
                  v-if="rewardsInfo.GOOD > 0"
                  >查看</el-link
                >
                <span v-else>--</span>
              </span>
            </el-col>
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <!-- 务工经历 -->
      <!-- <el-row style="padding:0px 24px">
                <el-col class="contractInfoTitle titleInfo" :span="20">
                    <div>
                        工作经历
                    </div>
                </el-col>
            </el-row> -->
      <div style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">工作经历</div>
        <el-row
          :span="24"
          v-for="(item, index) in experenceArr"
          :key="index"
          class="experienceInfoBox"
        >
          <el-col :span="18">
            <span class="statusName">
              <el-button
                size="mini"
                v-if="item.status === 'ON_JOB'"
                class="onState"
                >在职</el-button
              >
              <el-button
                size="mini"
                v-if="item.status === 'DISMISSED'"
                class="outState"
                >离职</el-button
              >
            </span>
            <div class="grid-content bg-purple-light">
              <div
                class="labelWidthSty detailInfoItemSty expressTitle"
                style="margin-top: 0"
              >
                <span class="gridContent color333 fontSizeE fontWeight">{{
                  item.companyName || '--'
                }}</span>
                <span class="line"></span>
                <span class="gridContent color666 fontSizeF spanlast">
                  <span
                    >{{ item.orgName }} <span v-if="item.employeeType">|</span>
                    {{ item.employeeType }}
                  </span>
                </span>
              </div>
              <p class="empDetailInfoItemSty clearfix">
                <el-col
                  :span="12"
                  class="labelWidthSty detailInfoItemSty"
                  style="margin-top: 0"
                >
                  <span class="gridContent color333 fontSizeF">添加日期：</span>
                  <span class="gridContent empContentSty color666 fontSizeF">{{
                    item.createTime || '--'
                  }}</span>
                </el-col>
                <el-col
                  :span="12"
                  class="labelWidthSty detailInfoItemSty"
                  style="margin-top: 0"
                >
                  <span class="gridContent color333 fontSizeF">离职日期：</span>
                  <span class="gridContent empContentSty color666 fontSizeF">{{
                    item.overDate || '--'
                  }}</span>
                </el-col>
              </p>
              <p class="empDetailInfoItemSty clearfix">
                <el-col
                  :span="18"
                  class="labelWidthSty detailInfoItemSty"
                  style="margin-top: 0"
                >
                  <span class="gridContent color333 fontSizeF">离职原因：</span>
                  <span class="gridContent empContentSty color666 fontSizeF">{{
                    item.overReason || '--'
                  }}</span>
                </el-col>
              </p>
            </div>
          </el-col>
          <el-col :span="2" class="toInfo">
            <el-link
              type="primary"
              @click="showContraDrawer(item.id, item.employeeId)"
              >合同信息</el-link
            >
          </el-col>
          <el-col :span="2" class="toInfo kqInfo">
            <el-link
              type="primary"
              @click="showKqDetailDrawer(item.id, item.employeeId)"
              >考勤信息</el-link
            >
          </el-col>
          <el-col :span="2" class="toInfo kqInfo">
            <el-link
              type="primary"
              @click="showSalaryDrawer(item.employeeId, item.id)"
              >工资发放</el-link
            >
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 右侧合同信息弹窗 -->
    <el-drawer
      custom-class="brand-dialog-min-width"
      title="合同信息"
      :visible.sync="showContratDrawer"
      direction="rtl"
      size="400px"
    >
      <div class="contratInfo">
        <el-row class="secondaryTitle secondaryTitleTheme">基础信息</el-row>
        <el-row class="basicInfo mrB30">
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >工资卡银行：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              drawercontractInfo.bankName || '--'
            }}</span>
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >工资卡号：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              drawercontractInfo.accountId || '--'
            }}</span>
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >手机号：</span
            >
            <span class="gridContent contentSty color666 fontSizeF">{{
              drawercontractInfo.tel || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row class="secondaryTitle secondaryTitleTheme mrT24"
          >合同信息</el-row
        >
        <div class="contractInfo">
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >部门：</span
            >
            <span
              class="gridContent contentSty color666 fontSizeF"
              style="width: calc(100% - 100px)"
              >{{ drawercontractInfo.orgName || '--' }}</span
            >
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >职位：</span
            >
            <span
              class="gridContent contentSty color666 fontSizeF"
              style="width: calc(100% - 100px)"
              >{{ drawercontractInfo.employeeType || '--' }}</span
            >
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >雇佣周期：</span
            >
            <span
              class="gridContent contentSty color666 fontSizeF"
              style="width: calc(100% - 100px)"
              >{{ drawercontractInfo.startDate || '--' }}至{{
                drawercontractInfo.endDate || '--'
              }}</span
            >
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >基本工资：</span
            >
            <span
              class="gridContent contentSty color666 fontSizeF"
              style="width: calc(100% - 100px)"
              >{{
                drawercontractInfo.standardSalary != null
                  ? drawercontractInfo.standardSalary
                  : '--'
              }}元/月</span
            >
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >合同附件：</span
            >
            <span
              class="gridContent contentSty color666 fontSizeF"
              style="width: calc(100% - 100px)"
            >
              <elementImage
                :upLoadFile="upLoadFile"
                :srcList="srcList"
                :oldSrcList="oldSrcList"
                :isDelFile="isDelFile"
                @changeSrcList="changeSrcList"
                :fileMarginLeft="0"
              ></elementImage>
            </span>
          </el-col>
        </div>
      </div>
    </el-drawer>

    <!-- 右侧考勤弹窗 -->
    <el-drawer
      custom-class="brand-dialog-min-width"
      title="考勤信息"
      :visible.sync="showKqDrawer"
      direction="rtl"
      size="900px"
    >
      <el-col :span="24" class="commomPadding searchInputWidth">
        <el-form
          :inline="true"
          :model="drawerKqfilterField"
          ref="searchConditions"
          label-width="80px"
        >
          <el-form-item label="考勤日期" class="row-padding-bottom name">
            <el-date-picker
              v-model="date"
              type="daterange"
              unlink-panels
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态" class="row-padding-bottom name">
            <el-select
              v-model="drawerKqfilterField.inRange"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in attendanceState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchKq"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchKq" class="commonBtn"></el-button>
                    </el-form-item> -->
        </el-form>
        <el-table
          :data="drawerKqTableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="
            border: 1px solid #dfe6ec;
            max-height: 700px;
            overflow: auto;
            margin-bottom: 16px;
          "
          :max-height="tableHeight"
        >
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="punchTime"
            label="打卡日期"
            align="left"
            width="120"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.punchTime.substring(0, 10) }}</div>
              <div>{{ scope.row.punchTime.substring(10, 21) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="打卡地址" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.address"
                :columnName="'address'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="path"
            label="打卡图片"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.path"
                :preview-src-list="scope.row.list"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="inRange"
            label="状态"
            width="80px"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.inRange == 1" class="successColor"
                >范围内</span
              >
              <span v-else class="errorColor">范围外</span>
            </template>
            <!-- 1 内: 0 -->
          </el-table-column>
          <!-- <el-table-column prop="remark" label="备注" align="center" :formatter=formatTd></el-table-column> -->
          <el-table-column label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="attType"
            label="打卡方式"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.attType == 0">APP</span>
              <span v-else>考勤机</span>
            </template>
          </el-table-column>
          <!-- attType  0 APP -->
        </el-table>
        <!-- <Pagination ref="drawerKqPagination" @getList="getDrawerKqTableList" :filterField="drawerKqfilterField" :requestUrl="drawerKqRequestUrl"></Pagination> -->
      </el-col>
      <Pagination
        style="padding-top: 24px"
        ref="drawerKqPagination"
        @getList="getDrawerKqTableList"
        :filterField="drawerKqfilterField"
        :requestUrl="drawerKqRequestUrl"
      ></Pagination>
    </el-drawer>
    <!-- 右侧工资发放弹窗 -->
    <el-drawer
      custom-class="brand-dialog-min-width"
      title="工资发放"
      :visible.sync="showSalaryrawer"
      direction="rtl"
      size="900px"
      :max-height="tableHeight"
    >
      <el-col :span="24" class="commomPadding searchInputWidth">
        <el-form
          :inline="true"
          :model="drawerSalaryfilterField"
          ref="searchConditions"
          label-width="80px"
        >
          <el-form-item label="发薪年份" class="row-padding-bottom name">
            <el-select
              v-model="drawerSalaryfilterField.year"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in yearOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发薪月份" class="row-padding-bottom name">
            <el-select
              v-model="drawerSalaryfilterField.month"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in monthOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id"
                clearable
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchSalary"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont iconchazhao1" @click="searchSalary" class="commonBtn"></el-button>
                    </el-form-item> -->
        </el-form>
        <el-table
          :data="drawerSalaryTableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          style="
            border: 1px solid #dfe6ec;
            max-height: 700px;
            overflow: auto;
            margin-bottom: 16px;
          "
        >
          <el-table-column
            prop="year,month"
            label="工资年月"
            align="center"
            min-width="120"
          >
            <template slot-scope="scope">
              <p>
                {{ scope.row.year || '--' }}年{{ scope.row.month || '--' }}月
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="发放时间"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="payStatusName"
            label="发放状态"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="shouldPay"
            label="应发金额（元）"
            align="center"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <el-table-column
            prop="bankActPay"
            label="实发金额（元）"
            align="center"
            :formatter="formatTd"
            min-width="140"
          ></el-table-column>
          <!-- <el-table-column prop="remark" label="备注" align="center" :formatter=formatTd></el-table-column> -->
          <el-table-column label="备注" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- attType  0 APP -->
        </el-table>
        <!-- <Pagination ref="drawerSalaryPagination" @getList="getDrawerSalaryTableList" :filterField="drawerSalaryfilterField" :requestUrl="drawerSalaryRequestUrl"></Pagination> -->
      </el-col>
      <Pagination
        ref="drawerSalaryPagination"
        @getList="getDrawerSalaryTableList"
        :filterField="drawerSalaryfilterField"
        :requestUrl="drawerSalaryRequestUrl"
      ></Pagination>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'monitorEmployeeDetail',

  data() {
    return {
      titleText: '人员档案',
      isDelFile: false,
      back: true,
      yearOptions: [
        { id: 2019, text: '2019年' },
        { id: 2020, text: '2020年' },
        { id: 2021, text: '2021年' },
      ],
      monthOptions: [
        { id: 1, text: '1月' },
        { id: 2, text: '2月' },
        { id: 3, text: '3月' },
        { id: 4, text: '4月' },
        { id: 5, text: '5月' },
        { id: 6, text: '6月' },
        { id: 7, text: '7月' },
        { id: 8, text: '8月' },
        { id: 9, text: '9月' },
        { id: 10, text: '10月' },
        { id: 11, text: '11月' },
        { id: 12, text: '12月' },
      ],
      employeeName: '', //人员姓名
      idCard: '', //身份证号
      employeeSex: '', //性别
      employeeBirth: '', //出生日期
      employeeNation: '', //名族
      homeAddress: '', //家庭住址
      edu: '', //教育程度
      politicalStatus: '', //政治面貌
      maritalStatus: '', //婚姻状况
      idcardUrl: '', //员工身份证头像
      errorPath: require('../../../static/img/employee/card.png'),
      employeeId: '',
      experenceArr: [], //务工经历
      //表格数据
      // tableList: [],
      //是否显示弹窗
      showContratDrawer: false,
      showKqDrawer: false,
      showSalaryrawer: false,
      // 弹窗搜素条件
      //弹窗数据
      drawercontractInfo: {
        bankName: '',
        accountId: '',
        tel: '',
        orgName: '',
        employeeType: '',
        startDate: '',
        endDate: '',
        standardSalary: '',
      },
      drawerKqTableList: [],
      list: [],
      drawerSalaryTableList: [],
      date: [], //日期区间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      drawerKqfilterField: {
        name: '',
        employeeId: '',
        // companyId: "",
        inRange: '',
        startDate: '',
        endDate: '',
      },
      drawerSalaryfilterField: {
        employeeId: '',
        contractId: '',
        year: '',
        month: '',
      },
      attendanceState: [
        {
          value: '1',
          label: '范围内',
        },
        {
          value: '0',
          label: '范围外',
        },
      ],
      drawerKqRequestUrl: 'api-att/nc/attendance/expand/attdetail',
      // drawerSalaryRequestUrl: "api-su/salary/expand/salarylist"
      drawerSalaryRequestUrl: 'api-su/salarydetail/expand/employeesalary',
      upLoadFile: [],
      oldSrcList: [],
      srcList: [],
      companyId: '',
      name: '',
      qyUscc: '',
      qyName: '',
      isName: '',
      tableHeight: window.innerHeight - 200,
      rewardsInfo: {},
    }
  },
  created() {
    //列表传过来的务工id和路由名称及公司id
    this.employeeId = this.$route.query.employeeId
    this.name = this.$route.query.name
    this.companyId = this.$route.query.companyId
    this.qyUscc = this.$route.query.qyUscc
    this.qyName = this.$route.query.qyName
    //获取人员详情数据
    this.getBatchInfo(this.employeeId)
    if (this.name == 'enterpriseStaff') {
      this.isName = 'enterpriseStaff'
    } else if (this.name == 'monitorEmployee') {
      this.isName = 'monitorEmployee'
    }
  },
  mounted() {},
  methods: {
    goBack() {
      this.$router.push('/home/employee/monitorEmployee')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/monitorEmployee',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //显示合同信息弹框
    showContraDrawer(contractId, employeeId) {
      this.showContratDrawer = true
      this.getContractDrawerInfo(contractId, employeeId)
    },
    getContractDrawerInfo(contractId, employeeId) {
      this.axios({
        method: 'post',
        url: 'api-e/nc/contract/expand/contractdetail',
        data: {
          contractId: contractId,
        },
      })
        .then((response) => {
          this.drawercontractInfo = response.data.result
          // this.upLoadFile = response.data.result.contractUrls;
          // this.srcList = response.data.result.contractUrls;

          var arr = []
          if (response.data.result.contractUrls.length > 0) {
            response.data.result.contractUrls.forEach((item, index) => {
              arr[index] = {}
              arr[index].url = item
            })
          }
          this.srcList = arr
          this.upLoadFile = arr
          this.oldSrcList = response.data.result.contractUrls
        })
        .catch((error) => {})
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    getDrawerKqTableList(data) {
      this.drawerKqTableList = data
      this.list = []
      for (var i = 0; i < this.drawerKqTableList.length; i++) {
        this.list.push(this.drawerKqTableList[i].path)
      }
      for (var i = 0; i < this.drawerKqTableList.length; i++) {
        var container = this.list
        var frontArr = container.slice(0, i)
        var behindArr = container.slice(i, this.drawerKqTableList.length)
        var list = behindArr.concat(frontArr)
        this.drawerKqTableList[i].list = list
      }
    },
    getDrawerSalaryTableList(data) {
      this.drawerSalaryTableList = data
    },
    showKqDetailDrawer(contractId, employeeId) {
      this.drawerKqfilterField.contractId = contractId
      this.drawerKqfilterField.employeeId = employeeId
      this.showKqDrawer = true
      this.$nextTick(function () {
        // this.drawerKqfilterField.startDate = "";
        // this.drawerKqfilterField.endDate = "";
        this.drawerKqfilterField.inRange = ''
        // this.date = [];
        var now = new Date()
        var year = now.getFullYear()
        var month = now.getMonth() + 1
        var date = now.getDate()
        var endTime = year + '-' + month + '-' + date
        var startTime = year + '-' + month + '-' + '1'
        this.date = [startTime, endTime]
        this.drawerKqfilterField.startDate = startTime
        this.drawerKqfilterField.endDate = endTime
        this.$refs.drawerKqPagination.getTableListData()
      })
    },
    showSalaryDrawer(employeeId, contractId) {
      this.drawerSalaryfilterField.employeeId = employeeId
      this.drawerSalaryfilterField.contractId = contractId
      this.showSalaryrawer = true
      this.$nextTick(function () {
        this.drawerSalaryfilterField.year = ''
        this.drawerSalaryfilterField.month = ''
        this.$refs.drawerSalaryPagination.getTableListData()
      })
    },
    searchKq() {
      if (!this.date || this.date == '' || this.date == null) {
        this.$message({
          message: '请选择起止日期',
          type: 'warning',
        })
        return
      }
      this.drawerKqfilterField.startDate = this.date[0]
      this.drawerKqfilterField.endDate = this.date[1]
      this.$refs.drawerKqPagination.getTableListData()
    },
    searchSalary() {
      this.$refs.drawerSalaryPagination.getTableListData()
    },
    getBatchInfo(employeeId) {
      this.axios({
        method: 'post',
        url: 'api-e/nc/employee/expand/one',
        data: {
          employeeId: employeeId,
        },
      })
        .then((response) => {
          var data = response.data.result
          var dataInfo = data.info
          this.experenceArr = data.exp
          this.drawerKqfilterField.name = dataInfo.name
          this.employeeName = dataInfo.name
          this.idCard = dataInfo.idcard
          this.employeeSex = dataInfo.sexValue
          this.employeeBirth = dataInfo.birthday
          this.employeeNation = dataInfo.nationalityValue
          this.homeAddress = dataInfo.address
          this.edu = dataInfo.eduValue
          this.maritalStatus = dataInfo.marriageValue
          this.politicalStatus = dataInfo.politicalValue
          this.idcardUrl = dataInfo.imgSource
          this.getCountbyemployee(dataInfo.name, dataInfo.idcard)
        })
        .catch((error) => {})
    },
    getCountbyemployee(name, idcard) {
      if (localStorage.getItem('judgeRoleCode') == 'company') {
        var searchType = 'nc'
      } else {
        var searchType = 'cs'
      }
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/countbyemployee',
        data: {
          idcard: idcard,
          name: name,
          searchType: searchType,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.rewardsInfo = res.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message.error('获取信息失败')
          }
        )
        .catch((error) => {})
    },
    // 跳转到列表
    toRewardsList(type) {
      var url = ''
      if (type == 'BAD') {
        url = '/home/worker/badRecord'
      } else {
        url = '/home/worker/rewards'
      }
      this.$router.push({ path: url, query: { name: this.employeeName } })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  // padding-left: 24px;
  // padding-right: 24px;
  padding: 0;
  padding-bottom: 50px;
}
.contratInfo {
  // padding: 0 24px;
  .labelWidth {
    text-align: right;
    width: 88px;
  }
}
.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
}
.information {
  font-size: 14px;
  color: #151515;
}
.titleInfo {
  height: 60px;
  font: 18px/60px Microsoft YaHei;
}

.identityInfoTitle {
  color: #009588;
  border-bottom: 1px solid #dee5f4;
  line-height: 60px;
  .title {
    position: relative;
    padding-left: 20px;
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 24px;
      left: 0;
      top: 17px;
      background: #265faa;
    }
  }
}
.basicInfoTitle {
  color: #67ace4;
}
.contractInfoTitle {
  color: #f9a243;
  .title {
    position: relative;
    padding-left: 20px;
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 24px;
      left: 0;
      top: 17px;
      background: #009588;
    }
  }
}
.imgStyle {
  margin-left: 16px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}
.experienceInfoBox {
  padding: 15px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  color: #333;
  margin-top: 15px;
  .statusName {
    display: inline-block;
    text-align: left;
    width: 80px;
    .onState {
      color: #009588;
      border: 1px solid #009588;
      background: rgba(0, 149, 136, 0.1);
      cursor: Default;
      transform: translateY(28px);
    }
    .outState {
      color: #bfc5cc;
      background: rgba(191, 197, 204, 0.09);
      cursor: Default;
      transform: translateY(28px);
    }
  }
  .bg-purple-light {
    display: inline-block;
    width: calc(100% - 100px);
  }
  .toInfo {
    padding-top: 36px;
    text-align: center;
    position: relative;
  }
  .companyName {
    font-size: 18px;
    color: #333333;
  }
  .org {
    font-size: 14px;
    color: #333333;
    margin-left: 10px;
  }
  .dateRange,
  .outReason {
    font-size: 14px;
    color: #666666;
    line-height: 25px;
  }
  .kqInfo {
    &:before {
      content: '|';
      display: block;
      position: absolute;
      top: 36px;
      left: 0;
      width: 1px;
      height: 6px;
      color: #dee5f4;
      //   border-left:1px solid #52595E;
    }
  }
}
.addressBox {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/deep/.el-drawer__body {
  padding: 0 24px;
}

.el-drawer__body .searchInputWidth {
  margin: 0 !important;
}
.title {
  position: relative;
  padding-left: 20px;
  &::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 24px;
    left: 0;
    top: 17px;
    background: #265faa;
  }
}
@import '../../../static/css/filterArea.less';
.expressTitle {
  line-height: 20px;
  height: 20px;
  margin-top: 0;
  .line {
    margin: 0 15px;
    width: 1px;
    height: 16px;
    background-color: #999;
    display: inline-block;
  }
  .spanlast {
    line-height: 20px;
  }
  span {
    vertical-align: middle;
  }
}
</style>
